<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>元素遍历</title>
        <!-- 元素遍历：用于DOM树中遍历元素【理解：针对元素嵌套，父子级】
            children()          功能：获取匹配元素集合中每个元素的子元素
            parent()            功能：获取匹配元素集合中每个元素的父元素
            
            siblings()          功能：获取匹配元素集合中每个元素的所有兄弟元素
            
            next()              功能：获取匹配元素集合中每个元素的下一个兄弟元素
            prev()              功能：获取匹配元素集合中每个元素的上一个兄弟元素

            each()              功能：遍历匹配元素的集合--遍历所有子元素
                                语法糖：each(function(index,element){
                                    $(element).text('$(index)')
                                    注意:打印遍历的值,不可以使用单双引号+拼接
                                    功能：获取到的元素，遍历元素内容
                                })
                                index：下标    element：元素  形参
         -->
         <style>
             .container{
                 border: 1px solid #82d4ff;
                 margin: 10px;
                 padding: 10px;
             }
             .box{
                 background: #c2d5ee;
                 margin: 10px;
                 padding: 10px;
             }
             button{
                 margin: 5px;
             }
         </style>
         <script src="../js/jquery-1.11.1.js"></script>
    </head>
    <body>
        <!--  -->
        <div class="container">
            <div class="box" id="box1">盒子1</div>
            <div class="box" id="box2">盒子2</div>
            <div class="box" id="box3">盒子3</div>
            <div class="box" id="box4">盒子4</div>
            <div class="box" id="box5">盒子5</div>
            <div class="box" id="box6">盒子6</div>
        </div>
        <button id="gc">获取子元素</button>
        <button id="gp">获取父元素</button>
        <button id="gs">获取兄弟元素</button>
        <button id="gn">获取下一个兄弟</button>
        <button id="gr">获取上一个兄弟</button>
        <button id="loop">遍历元素</button>
        <script>
            // 1.点击   获取子元素   按钮  实现.container下所有子元素添加背景色
            $("#gc").click(function(){
                // 通过   父找子 函数  --添加效果
                $(".container").children().css("background-color","#ff0");
            });
            // 2.点击   获取父元素   按钮  实现.container  添加背景色
            $("#gp").click(function(){
                $("#box2").parent().css("background-color","#eea6e7");
            });
            // 3.点击   获取兄弟元素   按钮  实现除了#box4字体颜色不变，其它变色
            $("#gs").click(function(){
                $("#box4").siblings().css("color","#bfadee");
            });
            // 4.点击   获取下一个兄弟元素   按钮  实现#box4 下一个兄弟，添加背景色
            $("#gn").click(function(){
                $("#box4").next().css("background-color","#16eed5");
            });
            // 5.点击   获取上一个兄弟元素   按钮  实现#box6 上一个兄弟，添加效果
            //                                      图、背景图、背景色、盒子阴影
            $("#gr").click(function(){
                $("#box6").prev().css({"background-color":"#a7ee4a",
                                       "width":"100px",
                                       "height":"100px",
                                       "border-radius":"50%",
                                       "background-image":"url(../img/123.png)",
                                       "box-shadow":"5px 5px 10px #ff0",
                                       "background-size":"100% 100%",
                                       "font-size":"0"
                });
            });
            // 6.点击 遍历元素    按钮  实现每个盒子上，这是第几个盒子
            $("#loop").click(function(){
                // 通过   .box    抓到6个元素【一组集合】
                 $(".box").each(function(i,e){  //e：代表元素    i：代表下标
                     // 每个盒子加文字：这是第几个盒子
                     $(e).text(`这是第${i+1}个盒子`);
                 })
            });
        </script>
    </body>
</html>